<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<title>Marketing Kit - Mobile</title>
		<link rel="stylesheet" href="css/themes/Bootstrap.css">
		<link rel="stylesheet" href="css/jquery.mobile.structure-1.4.0.min.css" />
		<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
		<script src="js/jquery-1.8.2.min.js"></script>
		<script src="js/jquery.mobile-1.4.0.min.js"></script>
		<script type="text/javascript" src="cordova.js"></script>
		<script>
			var compName = localStorage.getItem('ls_compname');
			var updateStatus = localStorage.getItem('ls_update');
			var compId = localStorage.getItem('ls_compid');
			
			var db = null;	
			
			//load database
			init();
			
			$(document).ready(function(){
				//change title with company name
				$('#lableTitle').text(compName);
				
				var nameId = getParam('name_id');
				$('#labelCat').text(nameId);
			
				$("#btnBack").click(function(){
					$.mobile.loading( 'show', {
						text: 'Loading to back!',
						textVisible: true,
						theme: 'c',
						html: ""
					});
					var newSubId = window.localStorage.getItem('sub_level1');
					var newNameId = window.localStorage.getItem('subname_level1');
					var oldSubId = window.localStorage.getItem('sub_level0');
					var param = 'sub_id='+newSubId+'&name_id='+newNameId+'&old_sub_id='+oldSubId;	
					window.location="list_product_1.htm?"+param;
				});
				
				
			});
			
			function getParam(name){
				name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");  
				var regexS = "[\\?&]"+name+"=([^&#]*)";  
				var regex = new RegExp(regexS);  
				var results = regex.exec(window.location.href); 
				if(results == null){
					return "";  
				}else{
					return results[1];
				}
			}
			
			function onDeviceReady(){
				try{
					$.mobile.loading( 'show', {
						text: 'Loading to create menu!',
						textVisible: true,
						theme: 'c',
						html: ""
					});
					db = window.openDatabase("marketkit", "1.0", "Market Kit Database", 1000000);
					db.transaction(
						function(tx){	
							var subId = getParam('sub_id');																			
							var sql = 'select * from tb_product where cat_id='+subId;
							//alert('sql:'+sql);													
							tx.executeSql(sql, [], 
								function (tx, result){
									var index = 0;
									for(var i=0;i<result.rows.length;i++){
										var obj = result.rows.item(i);									
										$('#txtDefinisi').html(obj.definition);
										$('#txtKeuntungan').html(obj.advantage);
										$('#txtKetentuan').html(obj.syarat);
										$('#txtCara').html(obj.catatan);
										$('#txtWaktu').html(obj.waktu);
										$('#txtJenis').html(obj.tipe);
											
										index++;										
									}
									$('#idTabs').trigger('create');
									$('#idNavbar').trigger('create');
									
									if(index==0){
										$('#txtDefinisi').html('<div align="center"><strong style="color:red">Data tidak ada.</strong></div>');
									}
								});
							}, function(err){
								alert('err sql :'+err);
							}, function(){
								$.mobile.loading( 'hide', {
									text: 'Loading to create menu!',
									textVisible: true,
									theme: 'c',
									html: ""
								});
							}
						);
				}catch(e){
					alert('print e:'+e);
				}
			}
			
			function init(){
	   			document.addEventListener("deviceready",onDeviceReady, false);
	   		}
			
			
		</script>
	</head>
	<body>
		<div data-role="page" data-theme="c">
			<div data-role="header" data-position="fixed">
				<a href="#" id="btnBack" name="btnBack" data-icon="arrow-l" data-theme="c">Back</a>	
				<h1 id="lableTitle">Marketing Kit - Mobile</h1>
			</div>
			<div data-role="content" class="ui-content" data-theme="c">
				<strong style="color:red" id="labelCat"></strong>
				<div data-role="tabs" id="idTabs">
					<div data-role="navbar" id="idNavbar" data-position="fixed">
						<ul>
							<li><a href="#Definisi" data-icon="info">Definisi</a></li>
							<li><a href="#Keuntungan" data-icon="star">Keuntungan</a></li>
							<li><a href="#Ketentuan" data-icon="alert">Ketentuan</a></li>
							<li><a href="#Cara" data-icon="gear">Cara</a></li>
							<li><a href="#Waktu" data-icon="clock">Jangka Waktu</a></li>
							<li><a href="#Jenis" data-icon="bullets">Jenis</a></li>
						</ul>
					</div>
					<div id="Definisi">
						<p>
							<strong style="color:red">Definisi</strong>
							<div id="txtDefinisi"></div>							
						</p>
					 </div>
					<div id="Keuntungan">						
						<p>
							<strong style="color:red">Keuntungan</strong>
							<div id="txtKeuntungan"></div>
						</p>
					</div>
					<div id="Ketentuan">
						<p>
							<strong style="color:red">Ketentuan</strong>
							<div id="txtKetentuan"></div>
						</p>
					</div>
					<div id="Cara">
						<p>
							<strong style="color:red">Cara</strong>
							<div id="txtCara"></div>
						</p>
					</div>
					<div id="Waktu">
						<p>
							<strong style="color:red">Jangka Waktu</strong>
							<div id="txtWaktu"></div>
						</p>
					</div>
					<div id="Jenis">
						<p>
							<strong style="color:red">Jenis</strong>
							<div id="txtJenis"></div>
						</p>
					</div>
				</div>
			</div><br />

		</div>
		
	</body>
</html>